<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" media="all" th:href="@{/admin/layui/css/layui.css}">
    <link rel="stylesheet" media="all" th:href="@{/admin/style/admin.css}">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <!-- 搜索 -->
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" placeholder="请输入账号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select name="status">
                            <option value="">请选择状态</option>
                            <option value="1">启用</option>
                            <option value="2">禁用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn" data-type="search" lay-submit lay-filter="LAY-search">搜索
                    </button>
                </div>
            </div>
        </div>

        <!-- 操作 -->
        <div class="layui-card-body">
            <table id="lay-list" lay-filter="lay-list"></table>
            <script type="text/html" id="table-operation">
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="offline"><i
                        class="layui-icon layui-icon-delete"></i>下线</a>
            </script>
        </div>
    </div>
</div>
<script type="text/html" id="statusTpl">
    {{#  if(d.status === 1){ }}
    启用
    {{#  } else { }}
    禁用
    {{#  } }}
</script>
<script th:src="@{/admin/layui/layui.js}"></script>
<script th:src="@{/webjars/JavaScript-MD5/js/md5.js}"></script>
<script>
    layui.config({
        base: '/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'admin'], function () {
        var form = layui.form, table = layui.table, admin = layui.admin;

        //监听搜索
        form.on('submit(LAY-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('lay-list', {
                where: field
            });
        });

        //列表管理
        table.render({
            elem: '#lay-list'
            , url: 'list'
            , method: 'post'
            , cols: [
                [
                    {type: 'numbers', width: 80, align: 'center', title: ''}
                    , {field: 'username', width: 200, align: 'center', title: '账号'}
                    , {field: 'nick', width: 200, align: 'center', title: '昵称'}
                    , {field: 'status', width: 100, align: 'center', title: '状态', templet: '#statusTpl'}
                    , {field: 'remark', align: 'center', title: '备注'}
                    , {
                        field: 'startTimestamp',
                        width: 300,
                        align: 'center',
                        title: '登录时间'
                    }
                    , {field: 'runTime', width: 200, align: 'center', title: '运行时长'}
                    , {
                        title: '操作',
                        width: 100,
                        minWidth: 50,
                        align: 'center',
                        fixed: 'right',
                        toolbar: '#table-operation'
                    }
                ]
            ]
            , response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            , page: false
            , text: {
                none: '暂无相关数据'
            }
            , done: function (res) {
                layer.closeAll('loading');
                admin.exit(res);
            }
        });

        //监听工具条
        table.on('tool(lay-list)', function (obj) {
            var data = obj.data;
            // 强制下线
            if (obj.event === 'offline') {
                var field = {sessionId: data.sessionId}
                layer.confirm('确定强制下线？', {icon: 3, title: '确认强制下线'}, function (index) {
                    admin.req({
                        url: 'offline'
                        , data: field
                        , done: function (res) {
                            layer.close(index);
                            //数据刷新
                            table.reload('lay-list');
                            layer.msg(res.msg, {icon: 1});
                        }
                    });
                });
            }
            // 重置密码
            else if (obj.event === 'reset') {
                layer.prompt({title: '请输入新密码，并确认', formType: 1}, function (pass, index) {
                    var field = {id: data.id, password: md5(pass)};
                    admin.req({
                        url: 'reset'
                        , type: 'post'
                        , data: field
                        , done: function (res) {
                            layer.close(index);
                            layer.msg(res.msg, {icon: 1});
                        }
                    });
                });
            }
        });
    });
</script>
</body>
</html>
